import Icon from '@/components/Icon'
import { RootState } from '@/store'
import { changeArticleLikings } from '@/store/action/article'
import { Toast } from 'antd-mobile'
import { useDispatch, useSelector } from 'react-redux'
import styles from './index.module.scss'

type Porps = {
  onShowComment: () => void
}

export default function ArticleFooter({ onShowComment }: Porps) {
  const dispatch = useDispatch()

  const { detail } = useSelector((state: RootState) => state.article)

  const handleLike = async () => {
    await dispatch(changeArticleLikings(detail.art_id))
    Toast.show({
      content: detail.attitude === 1 ? '取消成功' : '点赞成功',
      maskClickable: false,
      duration: 1000,
    })
  }

  const handleCollect = () => {
    Toast.show({
      content: '收藏业务实现请参考点赞功能',
      // 🔔 是否允许背景点击，提示文字未消失不能点击页面内容
      maskClickable: false,
      // 提示持续时间
      duration: 1000,
    })
  }

  return (
    <div className={styles.root}>
      <div className="comment-footer">
        <div className="input-btn">
          <Icon type="iconbianji" />
          <span>去评论</span>
        </div>

        <>
          <div className="action-item" onClick={onShowComment}>
            <Icon type="iconbtn_comment" />
            <p>评论</p>
            <span className="bage">{1}</span>
          </div>
          {/* 'iconbtn_like2' */}
          <div className="action-item" onClick={handleLike}>
            <Icon
              type={
                detail.attitude === 1 ? 'iconbtn_like_sel' : 'iconbtn_like2'
              }
            />
            <p>点赞</p>
          </div>
        </>
        <div className="action-item" onClick={handleCollect}>
          {/* 'iconbtn_collect' */}
          <Icon type={true ? 'iconbtn_collect_sel' : 'iconbtn_collect'} />
          <p>收藏</p>
        </div>
        <div className="action-item">
          <Icon type="iconbtn_share" />
          <p>分享</p>
        </div>
      </div>
    </div>
  )
}
